<template>
  <div id="UserInfoPage">
    <a-card title="个人信息" style="max-width: 400px; margin: 20px auto;">
      <!-- 用户头像 -->
      <div class="avatar-container" style="text-align: center; margin-bottom: 20px;">
        <a-avatar :size="100" :src="loginUserStore.loginUser.userAvatar" />
      </div>

      <!-- 显示模式 -->
      <div v-if="!isEditing">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="id">
            {{loginUser.id}}
          </a-descriptions-item>
          <a-descriptions-item label="账号">
            {{loginUser.userAccount}}
          </a-descriptions-item>
          <a-descriptions-item label="用户名">
            {{loginUser.userName ?? "暂无"}}
          </a-descriptions-item>
          <a-descriptions-item label="简介">
            {{loginUser.userProfile ?? "暂无"}}
          </a-descriptions-item>
          <a-descriptions-item label="注册时间">
            {{ createTime }}
          </a-descriptions-item>
        </a-descriptions>
        <div style="text-align: right; margin-top: 16px;">
          <a-button type="primary" @click="startEditing">编辑</a-button>
        </div>
      </div>

      <!-- 编辑模式 -->
      <div v-else>
        <a-form :model="editableUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="id">
            <a-input v-model:value="editableUser.id" disabled />
          </a-form-item>
          <a-form-item label="账号">
            <a-input v-model:value="editableUser.userAccount" disabled />
          </a-form-item>
          <a-form-item label="用户名">
            <a-input v-model:value="editableUser.userName" />
          </a-form-item>
          <a-form-item label="简介">
            <a-input v-model:value="editableUser.userProfile" />
          </a-form-item>
          <a-form-item label="注册时间">
            <a-input v-model:value="createTime" disabled />
          </a-form-item>
        </a-form>
        <div style="text-align: right; margin-top: 16px;">
          <a-button style="margin-right: 8px;" @click="cancelEditing">取消</a-button>
          <a-button type="primary" @click="saveChanges">保存</a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>

import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
const loginUserStore = useLoginUserStore()
import { reactive, ref } from 'vue';
import dayjs from 'dayjs'
import { updateUserUsingPost } from '@/api/userController.ts'
import { message } from 'ant-design-vue'

const loginUser=loginUserStore.loginUser;
const createTime=ref(dayjs(loginUserStore.loginUser.createTime).format('YYYY-MM-DD'))

// 编辑模式标志
const isEditing = ref(false);

// 可编辑的用户数据副本
const editableUser = reactive<API.UserUpdateRequest>({...loginUser});



// 开始编辑
const startEditing = () => {
  Object.assign(editableUser, loginUser); // 复制当前用户数据到可编辑对象
  isEditing.value = true;
};

// 取消编辑
const cancelEditing = () => {
  isEditing.value = false;
};

// 保存修改
const saveChanges = async () => {
  isEditing.value = false;
  const res=updateUserUsingPost({
    ...editableUser
  })
  if(res.data.code==0 && res.data.data){
    message.success("修改成功")
    Object.assign(editableUser, loginUser); // 复制当前用户数据到可编辑对象
  }else {
    message.error("修改失败"+res.data.message)
  }
};


</script>

<style scoped>
#UserInfoPage {
  .avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
